<template>
  <div class="empower-her-container">
    <div class="empower-her-container-inner">
      <!-- 顶部横幅 -->
      <div class="banner-section">
        <img
          src="https://cdn.shopify.com/s/files/1/0617/0099/7296/files/BN_5041784c-27bd-4cf4-85d0-6195c124155c.jpg?v=1709709618"
          alt="Empower Her Journey" class="banner-image" />
        <div class="comp-content comp-content-image">
          <svg version="1.1" id="img-base-image-425hjp8aj7"
            style="display:inline;width:initial;height:initial;stroke: none;max-width: 1920px;vertical-align:bottom;background:url('https://img1.goelia.com.au/local/goelia1995/ICON_1710818067193.jpg');background-size:cover;"
            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 603"> <a
              xlink:href="https://www.goelia1995.com/en-hk/pages/empower-her-journey-with-goladies" target="_self"
              style="cursor:pointer;">
              <rect x="655.728813559322" y="218.03389830508473" width="185.49152542372883" height="161.08474576271186"
                fill="transparent" pointer-events="visible"></rect>
            </a><a xlink:href="https://www.instagram.com/p/C3x5AR7h8Vm/?img_index=1" target="_self"
              style="cursor:pointer;">
              <rect x="859.1186440677966" y="214.77966101694915" width="195.2542372881356" height="165.96610169491524"
                fill="transparent" pointer-events="visible"></rect>
            </a><a xlink:href="https://www.facebook.com/groups/1567741057384204" target="_self" style="cursor:pointer;">
              <rect x="1075.5254237288136" y="216.40677966101694" width="192" height="161.08474576271186"
                fill="transparent" pointer-events="visible"></rect>
            </a> </svg>
        </div>
      </div>

      <!-- 介绍文字部分 -->
      <div class="intro-section">
        <div class="intro-content">
          <p class="intro-text">
            Celebrate with us these unique tales—by delving into narratives and insights
          </p>
          <p class="intro-text">that embody the strength, grace, and indomitable spirit of incredible women—the essence
            of
            <strong>#GOladies</strong>.
          </p>
        </div>
      </div>

      <!-- 故事卡片网格 -->
      <div class="stories-grid">
        <div v-for="(story, index) in storiesData" :key="index" class="story-card">
          <div class="story-image">
            <img :src="story.image" :alt="story.alt" />
          </div>
          <div class="read-more" v-if="story.isMore">
            <a href="#" class="read-more-button">READ MORE</a>
          </div>
          <div class="story-content">
            <p v-html="story.content"></p>
          </div>
        </div>
      </div>

      <!-- 订阅部分 -->
      <!-- <div class="newsletter-section">
        <h2>Newsletter</h2>
        <p>Subscribe For Up To 30% Off Your First Order.</p>
        <div class="newsletter-form">
          <input type="email" placeholder="Your email" />
          <button type="submit">Submit</button>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 添加具名导出
defineOptions({
  name: 'EmpowerHer'
})

// 故事数据
const storiesData = ref([
  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/6_9180f72e-6879-4fdb-9f09-ac85fef1f823.jpg?v=1709865765",
    alt: "Woman sharing her story",
    isMore: true
  },
  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/8_8eeea753-a007-4e7f-ac09-5d973aa2476c.jpg?v=1709866569",
    alt: "Female strength",
    isMore: true
  },
  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/4_a698d4f9-7b23-4f32-bd56-549fb6cd76d2.jpg?v=1709866572",
    alt: "Female creativity",
    isMore: true
  },

  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/10_e3da8486-a32c-4ca2-a15a-547eba57635b.jpg?v=1709866585",
    alt: "Woman sharing her story",
    isMore: false
  },
  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/11_b7b038ed-7a5c-486d-8397-834997cae236.jpg?v=1709866585",
    alt: "Female strength",
    isMore: false
  },
  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/12_38bab20c-83be-40c3-9140-41ae63a0dc7e.jpg?v=1709866585",
    alt: "Female creativity",
    isMore: false
  },

  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/2_f6c837c5-62fd-495d-82df-fe887d5f158b.jpg?v=1709866578",
    alt: "Woman sharing her story",
    isMore: true
  },
  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/3_d01310ce-9e63-4ce6-9240-e0b5e5564535.jpg?v=1709866575",
    alt: "Female strength",
    isMore: true
  },
  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/9_b7559962-b37e-4bc8-835d-cb50152d3e1a.jpg?v=1709867268",
    alt: "Female creativity",
    isMore: true
  },

  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/17_62095b89-423a-4969-8769-eaad05ba5b32.jpg?v=1712027019",
    alt: "Woman sharing her story",
    isMore: true
  },
  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/19_58d62eff-c52b-48d7-949d-fdd4d5d68608.jpg?v=1712027019",
    alt: "Female strength",
    isMore: true
  },
  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/20_f25b6b8b-8143-4e97-b3a7-5dcdf99e14e0.jpg?v=1712027019",
    alt: "Female creativity",
    isMore: true
  },

  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/14_eee722aa-4ceb-42e8-8c3a-aa9300153c1e.jpg?v=1712027019",
    alt: "Woman sharing her story",
    isMore: true
  },
  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/15_fee68001-a22f-466e-a819-dd6aaca5030f.jpg?v=1712027019",
    alt: "Female strength",
    isMore: true
  },
  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/16_dcbcddd5-6b6f-4d38-8960-fe50a59fbafb.jpg?v=1712027019",
    alt: "Female creativity",
    isMore: true
  },

  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/21_39123c22-4353-46fa-a775-eebfe490e124.jpg?v=1712027019",
    alt: "Woman sharing her story",
    isMore: true
  },
  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/18_87f6ddee-b6b8-482f-ba9c-520d33f3fe44.jpg?v=1712027019",
    alt: "Female strength",
    isMore: true
  },
  {
    image: "https://cdn.shopify.com/s/files/1/0617/0099/7296/files/13_324ce348-cfab-426d-935d-dc3f5a105d33.jpg?v=1712027033",
    alt: "Female creativity",
    isMore: true
  }
]);

onMounted(() => {
  // 可以在这里添加页面加载完成后的逻辑
});
</script>

<style lang="scss" scoped>
.empower-her-container {
  width: 100%;
  background-color: #f0f0f0;
}

.empower-her-container-inner{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
 
}

.banner-section {
  width: 100%;
  margin-bottom: 40px;

  .banner-image {
    width: 100%;
    height: auto;
    display: block;
  }
}

.intro-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin-bottom: 40px;

  .intro-content {
    // max-width: 800px;
    text-align: center;
  }

  .intro-text {
    font-size: 20px;
    line-height: 1.6;
    color: #232323;

    strong {
      font-weight: bold;
    }
  }
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  // padding: 0 20px;
  // max-width: 1200px;
  margin: 0 auto;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .story-card {
    display: flex;
    flex-direction: column;
    // margin-bottom: 50px;

    .story-image {
      width: 100%;

      img {
        width: 100%;
        height: auto;
        display: block;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }
    }

    .read-more {
      margin-bottom: 20px;

      .read-more-button {
        display: inline-block;
        border-style: solid;
        border-width: 0 0 1px;
        border-color: #ebebeb;
        padding: 15px;
        color: #fbfbfb;
        background: #cc9c96;
        font-size: 10px;
        width: 100%;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .story-content {
      font-size: 16px;
      line-height: 1.8;
      color: #333;

      p {
        margin: 0;
      }

      strong {
        font-weight: bold;
      }
    }
  }
}

.newsletter-section {
  background-color: #f8f8f8;
  padding: 60px 20px;
  text-align: center;
  margin-top: 50px;

  h2 {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 500;
  }

  p {
    font-size: 16px;
    margin-bottom: 25px;
    color: #555;
  }

  .newsletter-form {
    display: flex;
    max-width: 500px;
    margin: 0 auto;

    @media (max-width: 480px) {
      flex-direction: column;
    }

    input {
      flex-grow: 1;
      padding: 15px;
      border: 1px solid #ddd;
      outline: none;
      font-size: 14px;

      @media (max-width: 480px) {
        margin-bottom: 10px;
      }

      &:focus {
        border-color: #000;
      }
    }

    button {
      background-color: #232323;
      color: white;
      border: none;
      padding: 0 25px;
      font-size: 14px;
      cursor: pointer;
      letter-spacing: 1px;
      font-weight: 500;

      @media (max-width: 480px) {
        padding: 15px 25px;
      }

      &:hover {
        background-color: #000;
      }
    }
  }
}

// 移动端适配
@media (max-width: 992px) {
  .intro-section .intro-text {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .intro-section .intro-text {
    font-size: 16px;
  }

  .stories-grid {
    gap: 30px;
  }

  .story-card .read-more-button {
    font-size: 14px;
  }

  .story-content {
    font-size: 14px;
    line-height: 1.6;
  }
}

@media (max-width: 480px) {
  .intro-section {
    padding: 15px;
  }

  .stories-grid {
    gap: 20px;
    padding: 0 15px;
  }

  .newsletter-section {
    padding: 40px 15px;
  }

  .newsletter-section h2 {
    font-size: 20px;
  }
}
</style>